<template>
  <div class="home">
    <Header></Header>
    <ly-tab
      v-model="selectedId"
      :items="items"
      :options="options"
      @change="lyTap"
    >
    </ly-tab>
    <div class="home-swpier">
      <Swiper></Swiper>
      <Icons></Icons>
      <Recommend></Recommend>
    </div>
  </div>
</template>
<script>
import axios from "axios";
//引入搜索
import Header from "../components/Home/Header.vue";
//引入轮播图
import Swiper from "../components/Home/Swiper.vue";
//引入中间部分
import Icons from "../components/Home/Icons.vue";
//引入卡片部位
import Recommend from "../components/Home/Recommend.vue";
export default {
  name: "Home",
  data() {
    return {
      selectedId: 0,
      items: [
        { label: "推荐1" },
        { label: "手机" },
        { label: "智能" },
        { label: "电视" },
        { label: "家电" },
        { label: "笔记本" },
      ],
      options: {
        activeColor: "#FF6900",
        // 可在这里指定labelKey为你数据里文字对应的字段名
      },
    };
  },
  created() {
    axios({
      url: "http://localhost:3000/home123",
    }).then((res) => {
      console.log(res);
    });
  },
  components: {
    Header,
    Swiper,
    Icons,
    Recommend,
  },
  methods: {
    lyTap(item, index) {
      console.log(index);
    },
  },
};
</script>
<style scoped>
.ly-tab {
  position: fixed;
  top: 1.29rem;
  width: 100%;
  z-index: 100;
}
.ly-tab >>> .ly-tab-list {
  background-color: #f2f2f2;
}
.ly-tab >>> .ly-tab-item {
  color: rgb(116, 116, 116);
  font-size: 0.26rem;
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
.ly-tab >>> .ly-tabbar {
  box-shadow: 0 4px 5px 0 rgb(214, 214, 214);
  z-index: 2;
}
</style>
